<script setup>
import { computed, isRef, toRef } from 'vue'
import { Delete } from '@element-plus/icons-vue'

const props = defineProps({
  pointInfo: [Object, Array],
  address: [Object, String],
  id: String,
  deleteMarker: Function,
  disabled: Boolean,
})

const deleteClick = () => {
  props.deleteMarker(props.id)
}

const location = toRef(props.address)

const position = computed(() => {
  if (Array.isArray(props.pointInfo)) {
    return {
      latitude: props.pointInfo[1],
      longitude: props.pointInfo[0],
    }
  }
  return props.pointInfo
})
</script>

<template>
  <div style="width: 100%">
    <div>经度：{{ position.longitude }}</div>
    <div>纬度：{{ position.latitude }}</div>
    <div>位置： {{ location }}</div>
    <div v-show="!disabled" style="text-align: center; margin-top: 14px">
      <el-button :icon="Delete" size="small" @click="deleteClick">
        删除
      </el-button>
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
